/**
 * @description 组件样式
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 */
.pure-tabs {
	display: flex;
	text-align: var(--pure-tabs-text-align, center);
	background: var(--pure-tabs-background, var(--pure-background-default));
	height: var(--pure-tabs-height, 2.75em);

	&__left {
		flex-shrink: 0;
	}

	&__content {
		flex: 1;
		overflow: hidden auto;
		padding: var(--pure-tabs-content-padding);
	}

	&__right {
		flex-shrink: 0;
	}

	&__scroll-view {
		width: 100%;
		height: 100%;
	}

	&__items {
		padding: var(--pure-tabs-items-padding);
		position: relative;
	}

	&__item {
		flex-shrink: 0;
		padding: var(--pure-tabs-item-padding, 0 12px);
		margin: var(--pure-tabs-item-margin);
		display: flex;
		flex-direction: var(--pure-tabs-item-flex-direction, row);
		align-items: var(--pure-tabs-item-align-items, center);
		justify-content: var(--pure-tabs-item-justify-content, center);
		position: relative;
		transition: var(--pure-tabs-item-transition);
		height: 100%;

		&::before {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
			border-radius: inherit;
			transform: var(--pure-tabs-item-background-default-transform, scaleX(0));
			opacity: var(--pure-tabs-item-background-default-opacity, 0);
			transition: var(--pure-tabs-item-background-default-transition, 200ms);
		}

		&__indicator {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 0;
			z-index: 0;
		}

		&__text {
			position: relative;
			z-index: 2;
		}

		&--active {
			color: var(--pure-tabs-item-active-color, var(--pure-theme-primary));
			font-size: var(--pure-tabs-item-active-font-size);
			font-weight: var(--pure-tabs-item-active-font-weight, 700);

			&::before {
				background: var(--pure-tabs-item-active-background);
				opacity: var(--pure-tabs-item-active-background-opacity);
				transform: var(--pure-tabs-item-active-background-transform, scaleX(1));
				opacity: var(--pure-tabs-item-active-background-opacity, 1);
			}
		}

		&--disabled {
			opacity: var(--pure-tabs-item-disabled-opacity, var(--pure-opacity-disabled));
			cursor: not-allowed;
			pointer-events: none;
			font-size: var(--pure-tabs-item-disabled-font-size);
			color: var(--pure-tabs-item-disabled-color);
			font-weight: var(--pure-tabs-item-disabled-font-weight);

			&::before {
				background: var(--pure-tabs-item-disabled-background);
			}
		}
	}

	&__bar {
		position: absolute;
		z-index: 1;
		transition: var(--pure-tabs-bar-transition, all 0.3s ease-in-out);

		&__line {
			background: var(
				--pure-tabs-bar-background,
				var(--pure-tabs-item-active-color, var(--pure-tabs-theme, var(--pure-theme-primary)))
			);
			border-radius: var(--pure-tabs-bar-border-radius, var(--pure-radius-small));
		}
	}

	&--scroll-x {
		flex-direction: row;

		.pure-tabs__items {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			white-space: nowrap;
			gap: var(--pure-tabs-items-gap);
			height: 100%;
		}

		.pure-tabs__bar {
			bottom: var(--pure-tabs-bar-bottom, 3px);
			left: calc(var(--pure-tabs-bar-width, 1em) * -1);
			transform: var(--pure-tabs-bar-transform, translateX(-50%));

			&__line {
				width: var(--pure-tabs-bar-width, 1em);
				height: var(--pure-tabs-bar-height, 3px);
			}
		}
	}

	&--scroll-y {
		flex-direction: column;
		width: var(--pure-tabs-width, 5em);
		height: 100%;

		.pure-tabs__items {
			display: flex;
			flex-direction: column;
			gap: var(--pure-tabs-items-gap);
		}

		.pure-tabs__item {
			padding: var(--pure-tabs-item-padding, 8px);
		}

		.pure-tabs__bar {
			left: var(--pure-tabs-bar-left, 3px);
			top: calc(var(--pure-tabs-bar-height, 1em) * -1);
			transform: var(--pure-tabs-bar-transform, translateY(-50%));

			&__line {
				width: var(--pure-tabs-bar-width, 3px);
				height: var(--pure-tabs-bar-height, 1em);
			}
		}
	}

	&--equal {
		&.pure-tabs--scroll-x {
			.pure-tabs__items {
				width: 100%;
				overflow: hidden;
			}

			.pure-tabs__item {
				flex: 1;
			}
		}

		&.pure-tabs--scroll-y {
			.pure-tabs__items {
				height: 100%;
				overflow: hidden;
			}

			.pure-tabs__item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
		}
	}

	&--justify {
		&.pure-tabs--scroll-x {
			.pure-tabs__items {
				width: 100%;
				overflow: hidden;
				justify-content: space-between;
			}
		}

		&.pure-tabs--scroll-y {
			.pure-tabs__items {
				height: 100%;
				overflow: hidden;
				justify-content: space-between;
			}
		}
	}

	&--theme {
		.pure-tabs__item {
			&--active {
				color: var(--pure-tabs-item-active-color, var(--pure-text-color-invert));

				&::before {
					background: var(--pure-tabs-item-active-background, var(--pure-tabs-theme));
				}
			}
		}

		.pure-tabs__bar {
			display: none;
		}
	}

	&--ghost {
		.pure-tabs__item {
			&--active {
				color: var(--pure-tabs-item-active-color, var(--pure-tabs-theme));

				&::before {
					opacity: var(--pure-tabs-item-active-background-opacity, var(--pure-opacity-ghost));
				}
			}
		}
	}

	&--plain {
		.pure-tabs__item {
			&--active {
				color: var(--pure-tabs-item-active-color, var(--pure-tabs-theme));

				&::before {
					opacity: var(--pure-tabs-item-active-background-opacity, 0);
				}
			}
		}

		.pure-tabs__bar {
			display: block;
		}
	}
}
